<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/蘑菇.css"/>
		<meta name="viewport" content="width=400px" />
		<script type="text/javascript" src="js/a.js" ></script>
		<script type="text/javascript" src="js/b.js" ></script>
		<script type="text/javascript" src="js/c.js" ></script>
		<title></title>
	</head>
	<body>
		<div class="box">
			<header class="head">
				<h1>
					<img src="img/标题.gif">
				</h1>
				<div class="head_font">
					<h2>蘑菇街 总有高手帮你挑</h2>
					<p>
						<img src="img/2.gif">
						<img src="img/2.gif">
						<img src="img/2.gif">
						<img src="img/2.gif">
						<img src="img/2.gif">
						<span>超过2亿用户已下载</span>
					</p>
				</div>
				<div class="app" id='app'>
					<a href="#">打开APP</a>
				</div>
			</header>
			<nav class="nav_input">
				<div class="three" id="three">
					<img src="img/3.gif">
				</div>
				<div class="texts">
					<input type="text" placeholder="羽绒服"/>
				</div>
				<div class="weix">
					<img src="img/4.gif">
				</div>
				<div class="show" id="show">
					<ul id="show_lu">
						<!-- <li></li> -->
					</ul>
				</div>
			</nav>
			<div class="img_nav" >
				<ul id="img_lu">
					
				</ul>
			</div>
			<div class="infos" id="infos">
				<!-- <a href="#" class="abox" >
					<img src=""/>
					<p>女装</p>
				</a> -->
			</div>
			<div class="people" id='people'>
				<!-- <div>
					<span>
					<img src="">
					</span>
					<p></p>
					<h5>
						<img src="">
						<span><span>
					</h5>
				</div>
				<div>
					<span></span>
					<p></p>
				</div>-->
			</div> 
			<footer class="bto">
				<ul id='lu'>
					<!-- <li class="chang"></li>
					<li></li>
					<li></li>
					<li></li> -->
				</ul>
			</footer>
		</div>
		<script type="text/javascript">
			//c 中的searchData.data.hotWord.data 是三个行里面的内容，包包 衬衫等
			//       titltData是下载APP
			//		loopData   loopData.data[140378].list大三个图片
			//       infoData infoData.data.list博主内容
			//b中 tabarData  tabarData.data[127180].list是底部导航栏
			//a中navData   navData.data[140653].list是图片女装保暖那些
			
			//三个行
			var top_nav = searchData.data.hotWord.data;
			console.log(top_nav);
			var three = document.getElementById('three');
			var show =document.getElementById('show');
			var show_lu = document.getElementById('show_lu');
			var str_show ='';
			for(var i = 0;i<top_nav.length;i++){
				str_show +='<li>'+top_nav[i].query+'</li>'
			}
			show_lu.innerHTML = str_show;
			three.onclick = function(){
				show.style.display ='block';
			}
			//三张大图
			var img_lu = document.getElementById('img_lu');
			var img_img = loopData.data[140378].list;
			var img_str ="";
			console.log(img_img);
			for(var i = 0;i<img_img.length;i++){
				img_str +='<li><img src ="'+img_img[i].image_800+'"></li>';
			}
			img_lu.innerHTML = img_str;
			
			//渲染女装 
			var list =navData.data[140653].list; 
			var infos = document.getElementById('infos');
			var str =""
			for(var i =0;i<list.length;i++){
				str +='<a href="#" class="abox" >'+
					'<img src="'+list[i].image+'"/>'+
					'<p>'+list[i].title+'</p>'+
				'</a>'
			}
			infos.innerHTML = str;
			//底部导航
			var btoList =tabarData.data[127180].list;
			console.log(btoList);
			var lu =document.getElementById('lu');
			var strLi="";
			for(var i= 0;i<btoList.length;i++){
				strLi +='<li>'+ btoList[i].title+'</li>';
				
			}
			lu.innerHTML=strLi;
			var lis = lu.getElementsByTagName('li');
			// var il = lis[0];
			// console.log(il);
			for(var i =0;i<lis.length;i++){
				// lis[i].index =i
				lis[0].className='chang';
				lis[i].onclick = function(){
					
					for(var j =0; j < lis.length; j++){
						lis[j].className ='';
					}
					this.className ='chang';
					
				}
			}
			
			//博主内容
			var people = document.getElementById('people');
			var infoPeo =infoData.data.list;
			console.log(infoPeo);
			var peo ="";
			for(var i =0;i<infoPeo.length;i++){
				peo +='<div>'+
					'<span>'+'<img src="'+infoPeo[i].modelData.cover+'">'+'</span>'+
					'<p>'+infoPeo[i].modelData.desc+'</p>'+'<h5><img src="'+infoPeo[i].modelData.userInfo.avatar 
					+'"><span>'+infoPeo[i].modelData.userInfo.name+'</span></h5>'+
				'</div>';
			}
			people.innerHTML =peo;
			
		</script>
	</body>
</html>
